<template>
  <div class="item-save">
    <div class="save-list">
      <div class="grid-container">
        <div class="grid-item">
          <div class="save-pic">
            <img class="pic" src="/img/save01.webp" alt="">
          </div>
          <div class="save-name">默认收藏夹</div>
          <div class="save-visible">
            私有
          </div>
        </div>
        <div class="grid-item">
          <div class="save-pic">
            <img class="pic" src="/img/save01.webp" alt="">
          </div>
          <div class="save-name">默认收藏夹</div>
          <div class="save-visible">
            私有
          </div>
        </div>
        <div class="grid-item">
          <div class="save-pic">
            <img class="pic" src="/img/save01.webp" alt="">
          </div>
          <div class="save-name">默认收藏夹</div>
          <div class="save-visible">
            私有
          </div>
        </div><div class="grid-item">
        <div class="save-pic">
          <img class="pic" src="/img/save01.webp" alt="">
        </div>
        <div class="save-name">默认收藏夹</div>
        <div class="save-visible">
          私有
        </div>
      </div>
        <div class="grid-item">
          <div class="save-pic">
            <img class="pic" src="/img/save01.webp" alt="">
          </div>
          <div class="save-name">默认收藏夹</div>
          <div class="save-visible">
            私有
          </div>
        </div>
        <div class="grid-item">
          <div class="save-pic">
            <img class="pic" src="/img/save01.webp" alt="">
          </div>
          <div class="save-name">默认收藏夹</div>
          <div class="save-visible">
            私有
          </div>
        </div>

        <!--          <div class="grid-item">2</div>-->
        <!--          <div class="grid-item">3</div>-->
        <!--          <div class="grid-item">4</div>-->
        <!--          <div class="grid-item">5</div>-->

        <!-- 可以继续添加更多行 -->
      </div>

    </div>
  </div>
</template>
<script setup>

</script>
<style lang="scss" scoped>
.item-save{

  .save-list{
    margin-top: 20px;
    .grid-container {
      display: grid;
      grid-template-columns: repeat(5, 1fr); /* 5列，每列等宽 */
      gap: 16px; /* 列与列、行与行之间的间距 */
      .grid-item {
        //background-color: #f0f0f0; /* 背景色 */
        //padding: 16px; /* 内边距 */
        //text-align: center; /* 文本居中 */

        //border-radius: 8px; /* 圆角 */
        height: 180px;
        display: flex;flex-direction: column;
        justify-content: space-around;
        .save-pic{
          border-radius: 8px; /* 圆角 */
          height: 115px;
          overflow: hidden;
          .pic{
            width: 100%;
          }
        }
        .save-name{
          font-size: 14px;
        }
        .save-visible{
          font-size: 12px;
          color: gray;
        }
      }
    }

  }
}
</style>